 | obaydulbc Trainer 2 years ago |
javascript drop Down menu list code for wapka
javascript dropdown menu list like this
login your wapka site >> create new page >> name this page header >> now click on page >> click on header's mamage button >> click on new code and pase this
Note:- you can make it for login user or visitor. by editing this code such as possible [/b]
<html>
<head>
<style>
.dropbtn {
background-color: green;
color: white;
padding: 14px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover {
background-color: brown;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
</head>
<body>
<h2>List of tutorials using Dropdown menu</h2>
<p>Click on the button to open the tutorial dropdown menu.</p>
<div class="dropdown">
<button onclick="programmingList()" class="dropbtn">Programming</button>
<div id="myDropdown1" class="dropdown-content">
<a href="#java" onclick="java()">Java</a>
<a href="#python" onclick="python()">Python</a>
<a href="#c++" onclick="cpp()">C++</a>
<a href="#c" onclick="c()">C</a>
</div>
</div>
<div class="dropdown">
<button onclick="databaseList()" class="dropbtn">Database</button>
<div id="myDropdown2" class="dropdown-content">
<a href="#mysql" onclick="mysql()">MySQL</a>
<a href="#mdb" onclick="mDB()">MongoDB</a>
<a href="#cass" onclick="cassandra()">Cassandra</a>
</div>
</div>
<div class="dropdown">
<button onclick="WebTechList()" class="dropbtn">Web Technology</button>
<div id="myDropdown3" class="dropdown-content">
<a href="#php" onclick="php()">PHP</a>
<a href="#css" onclick="css()">CSS</a>
<a href="#js" onclick="js()">JavaScript</a>
</div>
</div>
<script>
/* methods to hide and show the dropdown content */
function programmingList() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function databaseList() {
document.getElementById("myDropdown2").classList.toggle("show");
}
function WebTechList() {
document.getElementById("myDropdown3").classList.toggle("show");
}
/* methods to redirect to tutorial page that user will select from dropdown list */
function java() {
window.location.replace("https://www.javatpoint.com/java-tutorial");
}
function python() {
window.location.replace("https://www.javatpoint.com/python-tutorial");
}
function cpp() {
window.location.replace("https://www.javatpoint.com/cpp-tutorial");
}
function c() {
window.location.replace("https://www.javatpoint.com/c-programming-language-tutorial");
}
function mysql() {
window.location.replace("https://www.javatpoint.com/mysql-tutorial");
}
function mDB() {
window.location.replace("https://www.javatpoint.com/mongodb-tutorial");
}
function cassandra() {
window.location.replace("https://www.javatpoint.com/cassandra-tutorial");
}
function php() {
window.location.replace("https://www.javatpoint.com/php-tutorial");
}
function css() {
window.location.replace("https://www.javatpoint.com/css-tutorial");
}
function js() {
window.location.replace("https://www.javatpoint.com/javascript-tutorial");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
if you need any help please contact with Admin
01892328077
www.facebook.com/obaydul2009.info
×
Alert message goes here
Plp file
Category
